<template>
	<div class="symbol_class">
		<el-tabs v-model="state.activeName" class="demo-tabs">
			<el-tab-pane label="基础信息" name="0">
				<el-form
					:model="formInline"
					ref="formInlineRef"
					class="demo-form-inline"
					label-width="160px"
					:disabled="false"
				>
					<div class="twoline">
						<el-form-item label="项目名称">
							<el-input
								v-model="formInline.projectName"
								placeholder="项目名称"
							/>
						</el-form-item>
						<el-form-item label="项目地址" prop="address">
							<el-input v-model="formInline.address" placeholder="项目地址">
								<template #append
									><svg-icon
										icon-class="map-icon"
										style="cursor: pointer"
										class="refresh-icon m-l10"
										@click="mapclick"
								/></template>
							</el-input>
						</el-form-item>
					</div>
					<div class="twoline">
						<el-form-item label="项目编码">
							<el-input v-model="formInline.projectCode"> </el-input>
						</el-form-item>
						<el-form-item label="项目分类">
							<el-select
								v-model="formInline.typeName"
								clearable
								placeholder="项目分类"
							>
								<el-option
									v-for="item in state.projectTypeList"
									:key="item.code"
									:label="item.name"
									:value="item.code"
								/>
							</el-select>
						</el-form-item>
					</div>
					<div class="twoline">
						<el-form-item label="预计开始日期">
							<el-date-picker
								v-model="formInline.predictStartTime"
								type="date"
								value-format="YYYY-MM-DD"
								placeholder="选择预计开始日期"
							/>
						</el-form-item>
						<el-form-item label="预计完成日期">
							<el-date-picker
								v-model="formInline.predictEndTime"
								type="date"
								value-format="YYYY-MM-DD"
								placeholder="选择预计开始日期"
							/>
						</el-form-item>
					</div>
					<div class="twoline">
						<el-form-item label="业务单元">
							<el-select
								v-model="formInline.businessUnit"
								clearable
								placeholder="项目分类"
							>
								<el-option
									v-for="item in state.businessList"
									:key="item.code"
									:label="item.name"
									:value="item.code"
								/>
							</el-select>
						</el-form-item>

						<el-form-item label="项目总额(万)">
							<el-input v-model="formInline.projectAmount"> </el-input>
						</el-form-item>
					</div>
					<div class="oneline">
						<!-- 项目类别(1公司自建2政府投资3代建项目) -->
						<el-form-item label="项目类型" class="oneline" prop="projects">
							<el-select
								v-model="formInline.projectCategory"
								clearable
								placeholder="项目类型"
							>
								<el-option
									v-for="item in state.projectCategoryList"
									:key="item.code"
									:label="item.name"
									:value="item.code"
								/>
							</el-select>
						</el-form-item>
					</div>

					<el-form-item label="项目摘要" class="oneline" prop="remark">
						<el-input
							v-model="formInline.projectSummary"
							show-word-limit
							type="textarea"
						/>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="onSubmit">提交</el-button>
						<el-button @click="goback">取消</el-button>
					</el-form-item>
				</el-form>
			</el-tab-pane>
			<el-tab-pane label="计划信息" name="1">
				<ProjectPlan :projectId="state.projectId"></ProjectPlan>
			</el-tab-pane>
		</el-tabs>
		<mapDialog ref="mapdialog" @getMapAddrInfo="getMapAddrInfo"></mapDialog>
	</div>
</template>
<script setup>
import { ref, reactive, onMounted, onBeforeMount } from "vue";
import mapDialog from "@/views/constructionProjectManage/projectmanagement/components/mapDialog.vue";
import blockComponents from "@/components/block_components/index.vue";
import ProjectPlan from "./projectPlan.vue";
import { projectListApi, projectConfigApi } from "@/api/project";
import { getURLhandler } from "@/views/constructionProjectManage/static/utools.js";
import {
	ElTabs,
	ElTabPane,
	ElForm,
	ElFormItem,
	ElSelect,
	ElOption,
	ElDatePicker,
	ElInput,
	ElButton,
	ElTableColumn,
	ElMessage,
} from "element-plus";
import tableIndex from "@/components/table/index.vue";
import { useRoute, useRouter } from "vue-router";
let route = useRoute();
const router = useRouter();
const state = reactive({
	activeName: "0",
	dateList: [],
	// 1公司自建2政府投资3代建项目
	projectCategoryList: [
		{
			name: "公司",
			code: 1,
		},
		{
			name: "政府",
			code: 2,
		},
		{
			name: "代建",
			code: 3,
		},
	],
	// 文体 医疗 养老 教育 文创传媒 体育公司 领创
	businessList: [
		{
			name: "文体",
			code: 1,
		},
		{
			name: "医疗",
			code: 2,
		},
		{
			name: "养老",
			code: 3,
		},
		{
			name: "教育",
			code: 4,
		},
		{
			name: "文创传媒",
			code: 5,
		},
		{
			name: "体育公司",
			code: 6,
		},
		{
			name: "领创",
			code: 7,
		},
	],

	projectTypeList: [
		{
			name: "项目分类1",
			code: 1,
		},
		{
			name: "项目分类2",
			code: 2,
		},
		{
			name: "项目分类3",
			code: 3,
		},
	],
	projectId: "",
	type: "",
	btnActiveName: "0",
	tableData: [
		{
			date: "111",
		},
	],
	tableHead: [
		{
			prop: "date",
			label: "任务名称",

			style: {
				color: "red",
				rgb: (252, 112, 24),
			},
		},
		{
			prop: "date",
			label: "任务代码",
		},
		{
			prop: "date",
			label: "关注",
			isSvg: ["gz_true", "gz_false"],
		},
		{
			prop: "date",
			label: "工作细项",
		},
		{
			prop: "date",
			label: "作业状态",
		},
		{
			prop: "date",
			label: "计划开始时间",
		},
		{
			prop: "date",
			label: "计划完成时间",
		},
		{
			prop: "date",
			label: "工期",
		},
		{
			prop: "date",
			label: "存在的问题及困难",
		},
		{
			prop: "date",
			label: "责任人",
		},
		{
			prop: "date",
			label: "责任部门",
		},
		{
			prop: "date",
			label: "是否超时",
			isSvg: ["time-out-icon", ""],
		},
		{
			prop: "date",
			label: "实际开始时间",
		},
		{
			prop: "date",
			label: "实际完成时间",
		},
	],
	page: {
		total: 0,
		pageSize: 50,
		currentPage: 1,
	},
});
const mapdialog = ref(null);
let formInline = reactive({
	projectName: "",
	address: "",
	projectCode: "",
	predictStartTime: "",
	predictEndTime: "",
	typeName: "",
	businessUnit: "",
	projectAmount: "",
	projectType: "",
	projectSummary: "",
});
const defaultProps = {
	children: "children",
	label: "label",
};
let data = reactive([
	{
		label: "1",
		children: [
			{
				label: "Level two 2-2",
				children: [
					{
						label: "Level three 2-2-2",
					},
				],
			},
		],
	},
	{
		label: "2",
		children: [
			{
				label: "Level two 3-1",
				children: [
					{
						label: "Level three 3-1-1",
					},
				],
			},
			{
				label: "Level two 3-3",
				children: [
					{
						label: "Level three 3-3-1",
					},
				],
			},
		],
	},
]);
const getMapAddrInfo = (data) => {
	console.log(data);
	formInline.address = data.address;
};
const handleNodeClick = (data) => {};
const tabHandleClick = (data) => {
	switch (state.btnActiveName) {
		case "0":
			break;
		case "1":
			break;
	}
};
//提交
const onSubmit = async () => {
	console.log(formInline);
	await projectConfigApi.updateProject(formInline).then((res) => {
		const { code, data, msg } = res;
		if (code == 200) {
			ElMessage.success("编辑成功");
		}
	});
};
const goback = () => {
	router.push({
		path: "/constructionProjectManage/project_mt/index",
	});
};
const mapclick = () => {
	if (mapdialog?.value) {
		mapdialog.value.openMap();
	}
};
//获取详情
const getByInfoHandler = async () => {
	await projectListApi.getprojectByid(state.projectId || "").then((res) => {
		const { code, data, msg } = res;
		if (code == 200) {
			Object.assign(formInline, data);
		}
	});
};
onBeforeMount(() => {
	state.projectId = getURLhandler(route.path).id;
	state.type = getURLhandler(route.path).type;
});
onMounted(() => {
	getByInfoHandler();
});
</script>
<style lang="scss" scoped>
@import "@/views/constructionProjectManage/static/button.scss";
@import "@/assets/general_style/dialog.scss";
.symbol_class {
  .demo-form-inline{
    .twoline {
      display: flex;
      .el-form-item {
        width: 100%;
        display: flex;
        justify-content: space-between;
        .el-form-item__content {
          width: 100%;
        }
        .el-select {
          width: 100%;
        }
        .el-date-editor {
          width: 100%;
        }
      }
  
      justify-content: space-between;
    }
    .oneline {
      .el-date-editor {
        width: 100%;
      }
      .el-select {
        width: 100%;
      }
    }
  }
}
</style>
